<script setup lang="ts">
import { useUserOpStore } from "@renderer/store/pinia/userOp";
import { EnumOpType, EnumResetSubType, EnumViewMode, IOpType } from "@renderer/assets/types";
import { ref, computed } from "vue";
import { sendSocketIoMsg } from "@renderer/api/request";
import BaseIcon from "@renderer/assets/icon/BaseIcon.vue";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";
const emit = defineEmits(['btnClick'])
const props = defineProps({
  withDropdown: {
    type: Boolean,
    default: true,
  },
  icon: {
    type: String,
    default: "",
  },
  tips: {
    type: String,
    default: "",
  },
  active: {
    type: Boolean,
    default: false,
  },
  opType: {
    type: Object,
    default: {
      type: EnumOpType.none,
      subType: ""
    },
  },
  svgBtn: {
    type:Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  }
});

const opStore = useUserOpStore();

const currentOpTypeRef = ref<IOpType>(props.opType as IOpType);

const currentIcon = computed(() => {
  return props.icon;
})

const handleClick = () => {
  currentOpTypeRef.value.type = props.opType.type
  handleChoose()
};

const handleChooseMenu = (item) => {
  currentOpTypeRef.value.subType = item.type;
  handleChoose()
}

const {
  activeViewRef,
  activeOpObjRef
} =  getActiveTabViewOp()

const handleChoose = () => {
  let msg
  switch (currentOpTypeRef.value.type){
    case EnumOpType.reset:
      msg = {
        viewType: activeViewRef.value.viewType,
        opType: EnumOpType.reset,
        subOpType: EnumResetSubType.resetAll,
      }
      sendSocketIoMsg(msg)
      break;
    case EnumOpType.rotate:
      if (props.opType.subType === ''){
        break;
      }
      msg = {
        viewType: activeViewRef.value.viewType,
        opType: currentOpTypeRef.value.type,
        subOpType:currentOpTypeRef.value.subType,
      }
      sendSocketIoMsg(msg)
      break;
  }
  if (props.opType.type !== EnumOpType.rotate){
    if (activeViewRef.value.viewMode === EnumViewMode.normal){
      opStore.setActiveOp(activeViewRef.value.groupId,currentOpTypeRef.value)
    }else if (activeViewRef.value.viewMode === EnumViewMode.quick) {
      opStore.setActiveOp(activeViewRef.value.viewId,currentOpTypeRef.value)
    }
  }
  emit('btnClick', currentOpTypeRef.value)
}

const disabled = computed(() =>{
  if (!activeOpObjRef.value){
    return true
  }
  if (props.disabled){
    return true
  }
  return activeOpObjRef.value?.disabledOpList.includes(props.opType.type)
})

const btnColor = computed(() =>{
    if (props.opType.type === EnumOpType.rotate){
      return  ''
    }
   return activeOpObjRef.value?.activeOp.type === props.opType.type ? 'active' : ''
})
</script>

<template>
  <v-menu location="top">
    <template v-slot:activator="{ props }">
      <v-btn-group class="!h-[35px] !mr-[5px]">
        <v-tooltip :text="tips" location="bottom">
          <template v-slot:activator="{ props }">
            <v-btn
              class="!w-[35px] !min-w-[35px]"
              v-if="!svgBtn"
              :disabled="disabled"
              :ripple="false"
              @click="handleClick"
              :color="btnColor"
              v-bind="props"
              :icon="currentIcon"
            >
            </v-btn>
            <v-btn v-else
                   class="!w-[35px] !min-w-[35px]"
                   :disabled="disabled"
                   :ripple="false"
                   @click="handleClick"
                   :color="btnColor"
                   v-bind="props"
                   :icon="currentIcon"
            >
              <base-icon name="mprIcon"></base-icon>
            </v-btn>
          </template>
        </v-tooltip>

        <v-btn
          :disabled="disabled"
          :ripple="false"
          v-if="withDropdown"
          class="!w-[18px] !p-0"
          v-bind="props"
          icon="mdi-arrow-down-thin"
        >
        </v-btn>
      </v-btn-group>
    </template>


    <slot name="dropdownSlot"
          :handleChooseMenu="handleChooseMenu"
          :disabled="disabled"
    > </slot>
  </v-menu>
</template>

<style scoped></style>
